<template>
  <transition name="slide-down">
    <div class="version-mask" v-if="show">
      <div class="version transition-container">
        <div class="version-banner">
          <img :src="bannerImage" />
        </div>
        <h3 class="version-title">售后宝 {{ versionNum }} 更新说明</h3>
        <div class="version-description" v-html="description"></div>
        <div class="version-bottom">
          <el-button type="text" class="btn btn-text" @click="show = false" v-track="$track.formatParams('SHB_VERSION_KNOWN')">知道了</el-button>
          <el-button type="primary" class="btn btn-text version-btn" @click="seeHelp" v-track="$track.formatParams('SHB_VERSION_MORE')">了解更多</el-button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { getLocalesOssUrl } from '@src/util/assets'
import http from '@src/util/http';
import platform from '@src/platform'
import Platform from '@src/util/platform.ts';
import { getRootWindowInitData } from '@src/util/window'
import { isOnlyCustomerServiceCloudVersion } from '@src/util/version'
import { getUserGuideStorageBase, setUserGuideStorageBase } from 'src/util/guideStorage.ts';
import {VERSION_NUM_KEY} from 'src/component/guide/systemStore'
const EditionMap = {
  '1': 'VIP版',
  '2': '标准版',
  '3': '企业版',
  '4': '体验版',
  '5': '基础版',
  '6': '客服云标准版',
  '7': '服务云标准版',
  '8': '服务云企业版',
  '9': '服务云智能版',
  '10': '服务云国际版'
}
const bannerImage = getLocalesOssUrl('/version-banner-v2.jpg')

export default {
  name: 'version',
  inject: ['initData'],
  props: {
    edition: {
      type: Number
    },
    version: String
  },
  data () {
    return {
      bannerImage,
      show: false,
      versionNum: '',
      description: '',
      rootWindowInitData: getRootWindowInitData(),
    }
  },
  watch: {
    'show' (val) {
      if (!val) {
        this.$emit('showSystemPopup', true)
      }
    }
  },
  computed: {
    isOnlyCustomerServiceCloudVersion() {
      return isOnlyCustomerServiceCloudVersion()
    },
    tenantType () {
      return this.initData.tenantType;
    },
    editionText () {
      return EditionMap[this.edition] || EditionMap[1]
    }
  },
  methods: {
    /** 检测是否有版本更新提示 */
    async checkVersion () {
      let stashUserGuide = await getUserGuideStorageBase();
      let version = this.version;
      // if (version && (!currVersion || currVersion != version)) {
      if (version && (!stashUserGuide || !stashUserGuide[`${VERSION_NUM_KEY}-${version}`] || stashUserGuide[`${VERSION_NUM_KEY}-${version}`].isComplete != 0)) {
        // 只有在显示提示信息后，才更新本地缓存
        if (await this.showVersion()) {
          setUserGuideStorageBase({
            userGuideList: [
              {
                type: `${VERSION_NUM_KEY}-${version}`,
                step: 1,
                isComplete: 0
              }
            ]
          });
          localStorage.setItem(VERSION_NUM_KEY, version);
        }
      } else {
        this.$emit('showSystemPopup', true)
      }
    },
    async showVersion () {
      try {
        let result = await http.get('/getLastVersion');
        let lastVersion = result.data || {};

        this.versionNum = lastVersion.versionNum.toLocaleLowerCase().replace('vip', '').replace('version', '');
        this.description = lastVersion.description;
        this.show = true;

        return true;
      } catch (error) {
        console.error(error);
      }

      return false;
    },
    seeHelp () {
      this.show = false;
      let url;
      // 老版本和服务云版本跳转服务云更新日志链接
      if(this.rootWindowInitData.cloudVersion) {
        const productLineList = this.rootWindowInitData.productLineList || []
        if (productLineList.includes(SHBProductLineEnum.BusinessServiceCloud)) {
          url = `https://doc.shb.ltd/shb_xwcs5n/${this.version.replace(' ', '')}.html`
        } else {
          // 客服云版本跳转客服云更新日志链接
          url = `https://doc.shb.ltd/shb_gnmf9i/${this.version.replace(' ', '')}.html`
        }
      } else {
        url = `https://doc.shb.ltd/shb_xwcs5n/${this.version.replace(' ', '')}.html`
      }
      platform.openLink(url);
    }
  },
  mounted () {
    this.checkVersion();

    // 导出显示版本信息接口，方面子页面调用
    window.shb_global_showVersion = this.showVersion;
  }
}
</script>

<style lang="scss">
.version-mask {
  @include mask();
  z-index: 999;
  overflow: auto;
}

.version {
  position: relative;
  margin: 100px auto 20px auto;
  background-color: #fff;
  width: 500px;
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.15);
  color: #333;
}

.version-banner {
  position: relative;
  padding-top: 1px;
  user-select: none;

  img {
    width: 100%;
    display: block;
    overflow: hidden;
    margin: -35px 0 0 0;
  }
}

.version-title {
  font-size: 20px;
  text-align: center;
  padding: 8px 0 15px 0;
  margin: 0;
}

.version-description {
  padding: 5px 30px 20px 30px;
  max-height: 240px;
  overflow: auto;

  p {
    margin-bottom: 8px !important;

    &:last-child {
      margin-bottom: 0 !important;
    }
  }
}

.version-description p {
  line-height: 20px;

  &:last-child {
    margin-bottom: 0 !important;
  }
}
.version-bottom {
  text-align: center;
  padding: 10px 15px;
  overflow: hidden;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  border-top: 1px solid #f0f0f0;

  button.btn {
    width: 100px;
    height: 32px;
    padding: 0;
    @include fontColor();
    line-height: 32px;
  }
}

.version-btn {
  font-size: 14px;
  color: #fff !important;
  border: none;
  outline: none;
  @include backgroundColor();
  border-radius: 4px;
  box-shadow: 0 1px 4px 0px rgba($color-primary, 0.5);
  &:hover {
    border-color: $color-primary !important;
    @include backgroundColorImportant();
  }
}
</style>
